<template>
	<view>
		<view class="bj-item">
			<view class="title">{{deviceInfo.deviceNum}}{{deviceInfo.deviceName}}</view>
			<view class="main-content">
				<view class="left-icon">
					<image v-if="deviceInfo.devicePicture" :src="deviceInfo.devicePicture"></image>
					<image style="width:136rpx;height: 136rpx;" v-if="!deviceInfo.devicePicture"
						src="../../../static/images/index/weibaorenwu.png" mode=""></image>
				</view>
				<view class="right-txt">
					<view class="txt-content">
						<view class="left">设备类型：</view>
						<view class="right">{{deviceInfo.deviceTypeName}}</view>
					</view>
					<view class="txt-content">
						<view class="left">设备型号：</view>
						<view class="right">{{deviceInfo.modelName}}</view>
					</view>
					<view class="txt-content">
						<view class="left">所在部门：</view>
						<view class="right">{{deviceInfo.deptName}}</view>
					</view>
					<view class="txt-content">
						<view class="left">关联备件数量：</view>
						<view class="right">{{deviceInfo.totalAmount}}</view>
					</view>
					<view class="txt-content">
						<view class="left">关联总价值：</view>
						<view class="right">{{deviceInfo.totalMoney}}</view>
					</view>

				</view>
			</view>
		</view>
		<view class="user-title">
			<view class="left-title">备件使用列表</view>
			<view class="right-title">
				<zb-dropdown-menu :zIndex="89" @toggleItem="toggleItem(3)" ref="dropdown1" active-color="#0F53AC"
					:titleColorStyle="titleColorStyle">
					<zb-dropdown-item :options="option" v-model="value1" @change="change1" name="first">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
		</view>
		<view class="list-item" v-for=" (item,index) in listInfo" :key="index">
			<view class="left-icon">
				<image v-if="item.partPicture" :src="item.partPicture"></image>
				<image style="width:136rpx;height: 136rpx;" v-if="!item.partPicture"
					src="../../../static/images/index/weibaorenwu.png" mode=""></image>
			</view>
			<view class="right-txt">
				<view class="txt1">{{item.partNum}}{{item.partName}}</view>
				<view class="txt3">
					<!-- 	<view>{{item.partTypeName}}</view>
					<view>使用数量：{{item.totalAmount}}</view> -->
					<view style="width:200rpx;">{{item.partTypeName}}</view>
					<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：{{item.totalAmount}}</view>
				</view>
				<view class="txt2">总价值：{{item.totalMoney}}</view>
			</view>
		</view>
		<view class="empty-data" v-if="listInfo.length==0">
			<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleColorStyle: {
					background: '#f2f2f2',
				},
				value1: '',
				option: [{
					text: '全部',
					value: ''
				}],
				current: 0,
				listInfo: [],
				deviceInfo: {},
				deviceId: '',
				params: {
					pn: 1,
					ps: 5,
					deviceId: '',
					partType: ''
				}
			}
		},
		onLoad(options) {
			if (options) {
				this.deviceInfo = JSON.parse(decodeURIComponent(options.items));
				this.params.deviceId = this.deviceInfo.id;
				console.log('this.deviceInfo====>', this.deviceInfo)
			}
			this.getDictionaryList();
			this.getInfoDetail();
		},
		methods: {
			toggleItem(val) {
				if (val === 1) {
					this.$refs.dropdown1.close()
				}
			},
			change1(val) {
				console.log('===========', val, this.value1)
				this.listInfo = [];
				this.params.pn = 1;
				this.params.partType = this.value1;
				this.getInfoDetail();
			},
			getInfoDetail() {
				uni.$u.http.post(`/device/mobile/deviceInfo/partUsageListByDeviceId`, this.params).then(res => {
					if (res.code == 0) {
						this.listInfo = res.data.records;
					}
				}).catch(err => {})
			},
			getDictionaryList() {
				uni.$u.http.post(`/system/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'part_type'
				}).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								let dd = {
									text: item.configValue,
									value: item.id
								}
								this.option.push(dd);
							})
							// this.value1=this.option[0].value;
						}
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.bj-item {
		background: #fff;
		padding: 20rpx;
		margin: 10rpx 0;

		.title {
			font-size: 34rpx;
			color: #000000;
		}

		.main-content {
			display: flex;
			margin-top: 10rpx;

			.left-icon {
				image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt-content {
					display: flex;
					color: #8c8c8c;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					.right {
						color: #000000;
						padding-left: 4rpx;
					}
				}
			}
		}

		.item-btn {
			border-top: 1px solid #f2f2f2;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 0;
			margin-top: 20rpx;

			.chuku {
				width: 45%;
				font-size: 34rpx;
				color: #8c8c8c;
				text-align: center;
			}

			.ruku {
				width: 45%;
				font-size: 34rpx;
				color: #0F53AC;
				text-align: center;
			}

			.su-line {
				width: 4rpx;
				height: 50rpx;
				background: #f2f2f2;
			}
		}
	}

	.user-title {
		padding: 0 60rpx 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.list-item {
		display: flex;
		// align-items: center;
		padding: 20rpx;
		background: #fff;
		border-bottom: 1px solid #f2f2f2;

		.left-icon {
			border-radius: 8rpx;

			image {
				width: 152rpx;
				height: 152rpx;
				border-radius: 8rpx;
			}
		}

		.right-txt {
			padding-left: 32rpx;
			width: 100%;

			.txt1 {
				font-size: 34rpx;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;

			}

			.txt2 {
				color: #8c8c8c;
				font-size: 28rpx;
				margin: 10rpx 0;
			}

			.txt3 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;
				color: #8c8c8c;
				font-size: 28rpx;
			}
		}
	}

	.list-item:last-child {
		border-bottom: none;
	}
</style>